<template>
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="isShow" width="60%" :before-close="handleClose">
      <el-row style="margin-bottom:20px">
        <el-col :span="6"> 【题型】: {{ questionsDetail.questionType | questionTypeFilter }} </el-col>
        <el-col :span="6"> 【编号】: {{ questionsDetail.id }} </el-col>
        <el-col :span="6"> 【难度】: {{ questionsDetail.difficulty | difficultyFilter }} </el-col>
        <el-col :span="6"> 【标签】: {{ questionsDetail.tags }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="6"> 【学科】: {{ questionsDetail.subjectName }} </el-col>
        <el-col :span="6"> 【目录】: {{ questionsDetail.directoryName }} </el-col>
        <el-col :span="6"> 【方向】: {{ questionsDetail.direction }} </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col :span="24">
          【题干】:
          <div style="margin:15px 0;color:blue;">{{ questionsDetail.question }}</div>
        </el-col>
      </el-row>

      <div>
        <div v-if="questionsDetail.questionType === '1'">
          <div style="margin-bottom:15px">{{ questionsDetail.questionType | questionTypeFilter }} 选项: (以下选中的选项为正确答案)</div>
          <el-radio-group v-model="radio">
            <div class="checkbox" v-for="(item) in questionsDetail.options" :key="item.id" >
            <el-radio style="margin-bottom:10px" :label="item.isRight" disabled>{{ item.title }}</el-radio><img v-if="item.img.length>0" :src="item.img" alt="" style="width: 100px;height: 60px;margin-left: 10px;" />
            </div>
          </el-radio-group>
        </div>
        <div v-if="questionsDetail.questionType === '2'">
          <div style="margin-bottom:15px">{{ questionsDetail.questionType | questionTypeFilter }} 选项: (以下选中的选项为正确答案)</div>
          <el-checkbox-group v-model="checkList">
            <div class="checkbox" v-for="item in questionsDetail.options" :key="item.id">
              <el-checkbox :label="item.isRight" disabled>{{ item.title }}</el-checkbox
              ><img v-if="item.img.length>0" :src="item.img" alt="" style="width: 100px;height: 60px;margin-left: 10px;" />
            </div>
          </el-checkbox-group>
        </div>
        <div v-else></div>
      </div>

      <hr />
      <div>
        【参考答案】 : <el-button type="danger" size="small" @click="show = true">视频答案预览</el-button> <br />
        <video v-show="show" controls="controls" :src="questionsDetail.videoURL"></video>
      </div>
      <hr />
      <div style="margin:15px 0">【答案解析】 : {{ questionsDetail.answer }}</div>
      <hr />
      <div style="margin-top:15px">【题目备注】 : {{ questionsDetail.remarks }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    questionsDetail: {
      type: Object
    },
    isShow: {
      type: Boolean
    }
  },
  data () {
    return {
      radio: 1, // 单选
      checkList: [1], // 多选
      show: false
    }
  },
  methods: {
    close () {
      console.log(111)
      this.$emit('close', !this.isShow)
    },
    handleClose (done) {
      this.$emit('close', !this.isShow)
      if (this.isShow === false) {
        done()
      }
    }
  }
}

</script>

<style scoped lang="scss">
.el-checkbox-group,
.el-radio-group {
  display: flex;
  flex-direction: column;
}
video {
  width: 400px;
  height: 300px;
}
.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>
